<template>
    <div style="height: 100%">
        <div class="BsConent">
            <van-search
                v-model="searchvalue"
                show-action
                shape="round"
                placeholder="请输入搜索关键词"
                @search="onSearch"
            >
            <template #action>
                <van-dropdown-menu>
                    <van-dropdown-item v-model="fclasskind" :options="option1" />
                </van-dropdown-menu>
            </template>
            </van-search>


                <van-checkbox-group v-model="result" ref="checkboxGroup">

                    <div class='cardSelf'>
                        <div class='cardSelftitle van-hairline--bottom'>蛋白</div>
                        <div>
                            <van-cell-group>
                                <van-cell  value="标准号GB2012">
                                    <template #title>
                                        <div class='titleFlex'>
                                            <van-checkbox  name="1" ref="checkboxes" />
                                            <div style="margin-left:10px">第一法</div>
                                        </div>
                                    </template>
                                    <template #label>
                                        <div class='labelSolt'>
                                            <div style="labelSoltleft">[1,2]</div>
                                            <div class='labelSoltright'>[2.3]</div>
                                        </div>
                                    </template>
                                </van-cell>

                                <van-cell  value="标准号GB2013">
                                    <template #title>
                                        <div class='titleFlex'>
                                            <van-checkbox  name="2" ref="checkboxes" />
                                            <div style="margin-left:10px">第二法</div>
                                        </div>
                                    </template>
                                    <template #label>
                                        <div class='labelSolt'>
                                            <div style="labelSoltleft">[1,2]</div>
                                            <div class='labelSoltright'>[2.3]</div>
                                        </div>
                                    </template>
                                </van-cell>
                            </van-cell-group>
                        </div>
                    </div>

                     <div class='cardSelf'>
                        <div class='cardSelftitle van-hairline--bottom'>脂肪</div>
                        <div>
                            <van-cell-group>
                                <van-cell  value="标准号GB2012">
                                    <template #title>
                                        <div class='titleFlex'>
                                            <van-checkbox  name="3" ref="checkboxes" />
                                            <div style="margin-left:10px">第一法</div>
                                        </div>
                                    </template>
                                    <template #label>
                                        <div class='labelSolt'>
                                            <div style="labelSoltleft">[1,2]</div>
                                            <div class='labelSoltright'>[2.3]</div>
                                        </div>
                                    </template>
                                </van-cell>

                                <van-cell  value="标准号GB2013">
                                    <template #title>
                                        <div class='titleFlex'>
                                            <van-checkbox  name="4" ref="checkboxes" />
                                            <div style="margin-left:10px">第二法</div>
                                        </div>
                                    </template>
                                    <template #label>
                                        <div class='labelSolt'>
                                            <div style="labelSoltleft">[1,2]</div>
                                            <div class='labelSoltright'>[2.3]</div>
                                        </div>
                                    </template>
                                </van-cell>
                            </van-cell-group>
                        </div>
                    </div>
            </van-checkbox-group>
           
        </div>
        <div class='IIFooterBtn'>
            <div class='bystandard'>
                <div class='bystandardBtn' @click="checkAll">全选/反选</div>
            </div>
            <div class='byproject'>
                <div class='byprojectBtn' >确定</div>
            </div>
        </div>
    </div>
</template>

<script>
import { 
    Field
    ,DatetimePicker
    , Popup
    ,Cell
    ,CellGroup
    ,Picker
    ,Toast
    ,RadioGroup
    , Radio 
    ,Stepper
    , Checkbox
    , CheckboxGroup
    ,IndexBar
    , IndexAnchor
    ,Switch
    ,Panel
    ,Button
    ,Search
    ,DropdownMenu
    , DropdownItem
} from 'vant';
export default {
    name: 'byProject',
    components: {
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        [Search.name]:Search,
        [Button.name]:Button,
        [Panel.name]:Panel,
        [Switch.name]:Switch,
        [IndexBar.name]:IndexBar,
        [IndexAnchor.name]:IndexAnchor,
        [Checkbox.name]:Checkbox,
        [CheckboxGroup.name]:CheckboxGroup,
        [Stepper.name]:Stepper,
        [Radio.name]:Radio,
        [RadioGroup.name]:RadioGroup,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Field.name]:Field,
        [DatetimePicker.name]:DatetimePicker,
        [Popup.name]:Popup,
        [Picker.name]:Picker,
    },
    created() {
    },
    data() {
        return {
            checked:false,
            result:[],
            searchvalue:'',
            option1:[
                { text: '一类', value: '' },
                { text: '二类', value: '1' },
                { text: '三类', value: '2' },
                { text: '四类', value: '3' }
            ],
            fclasskind:'',
            selectFlag:false
        }
    },
    methods: {
        onSearch(){

        },
        checkAll(){
            this.selectFlag = !this.selectFlag
            if(this.selectFlag){
                this.$refs.checkboxGroup.toggleAll(true);
            }else{
                this.$refs.checkboxGroup.toggleAll();
            }
            
        }
    }
}
</script>

<style >
.titleFlex{
    display:flex;
    line-height: 24px;
}
.cardSelftitle{
    text-align: left;
    line-height: 40px;
    margin-left:10px;
    font-size: 18px;
}
.IIConent{
    margin-bottom:40px
}
.IIFooterBtn{
    width:100%;
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    left:0;
    color: white;
    display: flex;
}
.bystandard{
    display: flex;
    justify-content: center;
    align-items:center;
    width: 50%;
}
.bystandardBtn{
    background: #ff976a;
    width:70%;
    height:30px;
    line-height: 30px;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
.byproject{
    display: flex;
    justify-content: center;
    align-items:center;
    width: 50%;
}
.byprojectBtn{
    background: #07c160;
    width:70%;
    height:30px;
    line-height: 30px;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
.BsConent .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
    border-width: 0!important;
}
.BsConent .van-cell__title, .van-cell__value{
    margin-left:10px
}
.cardSelf{
    width: 94%;
    margin:10px auto;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: .3s;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)
}
.topHeader{
    display:flex;
    justify-content: space-around;
    line-height:28px;
    padding:10px
}
.topHeaderLeft{
    width:80%;
    display:flex;
    align-items:center;
    justify-content: flex-end ;
}
.cardSelf .van-cell__title{
    text-align: left;
}
.cardSelf .van-panel__footer{
    text-align: right;
}
.labelSolt{
    font-size:16px;
    margin-left:30px;
    display: flex;
    justify-content: space-around;
}   
.labelSoltleft{
    text-align: left;
    width: 50%;
}
.labelSoltright{
    width: 50%;
    text-align: right;
}
</style>